import React from 'react'

import { Flex } from 'antd-mobile'

import styles from './index.module.css'

// 条件筛选栏标题数组：
const titleList = [
  { title: '区域', type: 'area' },
  { title: '方式', type: 'mode' },
  { title: '租金', type: 'price' },
  { title: '筛选', type: 'more' }
]

export default function FilterTitle({ titleSelectedStatus, onClick }) {
 
  return (
    <Flex align="center" className={styles.root}>
      {titleList.map(item => {
        // 定义变量 用于判断是否添加高亮样式
        const isSelected = titleSelectedStatus[item.type]
        // console.log(isSelected)
        return (
          // 子传父 子组件通过调用父组件传过来的函数 把子组件的 type 属性值作为参数传递给父组件的点击事件
          <Flex.Item key={item.type} onClick={ () => onClick(item.type) }>
          {/* 选中类名： selected 控制是否高亮的类名 */}
          <span className={[styles.dropdown, isSelected ? styles.selected : ''].join(' ')}>
            <span>{item.title}</span>
            <i className="iconfont icon-arrow" />
          </span>
        </Flex.Item>
        ) 
      }) }
    </Flex>
  )
}
